<template>
<div class="demo-block">
	<h2 class="intro-title">安装</h2>
	<h3 class="base-title">npm 安装</h3>
	<p class="base-content">推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。</p>
	<code class="base-code-area">
		npm i ygbh -S
	</code>
	<h3 class="base-title">CDN</h3>
	<p class="base-content">目前可以通过 unpkg.com/ygbh 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。</p>
	<code class="base-code-area">
		<textarea readonly="readonly" class="demo-core-box"><!-- 引入样式 --></textarea>
		<textarea readonly="readonly" class="demo-core-box"><link rel="stylesheet" href="//unpkg.com/ygbh/ygbh.css"></textarea>
		<textarea readonly="readonly" class="demo-core-box"><!-- 引入组件库 --></textarea>
		<textarea readonly="readonly" class="demo-core-box"><script src="//unpkg.com/ygbh/ygbh.js"></script></textarea>
	</code>
</div>
</template>

<script>
export default {
	name: 'containerDemo',
	props: {
		msg: String
	},
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'javascript:void(0)',
			},
			caseObj2: {
				showCoreFlag: false,
				coreUrl: 'javascript:void(0)',
			},
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		}
	},
}
</script>
<style scoped>
.demo-block{ padding: 0 20px 20px; }
.demo-block .bh-tag{ margin-right: 10px; }
</style>